var __transferIndex = 1;
function transferIncrease() {
    __transferIndex++;
}
function __on (element, event, handler, useCapture = false) {
	if (element && event && handler) {
		element.addEventListener(event, handler, useCapture);
	}
};
function __off (element, event, handler, useCapture = false) {
	if (element && event) {
		element.removeEventListener(event, handler, useCapture);
	}
};

var widgets = [
	{
		name: 'Input',
		template:`
		<div :class="wrapClasses">
	        <template v-if="type !== 'textarea'">
	            <input
	            	v-if="(type == 'text') || (type == 'number') || (type == 'password') || (type == 'date')"
	            	ref="input"
	                :id="elementId"
	                :type="currentType"
	                :class="inputClasses"
	                :placeholder="placeholder"
	                :disabled="itemDisabled"
	                :maxlength="maxlength"
	                :name="name"
	                :value="currentValue"
	                :number="number"
	                :min="minVal" 
	                @keyup.enter="handleEnter"
	                @keyup="handleKeyup"
	                @keypress="handleKeypress"
	                @keydown="handleKeydown"
	                @focus="handleFocus"
	                @blur="handleBlur"
	                @compositionstart="handleComposition"
	                @compositionupdate="handleComposition"
	                @compositionend="handleComposition"
	                @input="handleInput"
	                @change="handleChange">
	            <select v-if="type == 'select'" :class="inputClasses" v-model="currentValue">
	            	<option value="" ></option>
	            	<option :value="v.v" v-for="(v,k) in options" v-text="v.k">启用</option>
	            </select>
	            <div class="pa t0 b0 r0 w30 flex alc center trs2 opa8 hovopa1" :class="currentType" v-if="type == 'password'" @click="showPassword = !showPassword">
	            	<i class="fa fa-eye-slash" v-if="currentType == 'password'"></i>
	            	<i class="fa fa-eye" v-else></i>
	            </div>
	        </template>
	        <template v-else>
	            <textarea
	            	ref="textarea"
	                :id="elementId"
	                :class="textClasses"
	                :style="style"
	                :placeholder="placeholder"
	                :disabled="itemDisabled"
	                :name="name"
	                :value="currentValue"
	                @keyup.enter="handleEnter"
	                @input="handleInput">
	            </textarea>
	        </template>
	    </div>
		`,
		props: {
            type: { type: String, default: 'text' },
            value: { type: [String, Number],default: ''},
            class: {type: String, default: '' },
            iclass: {type: String, default: '' },
            style: {type: String, default: '' },
            placeholder: { type: String, default: '' },
            maxlength: { type: [String, Number] },
            disabled: { type: Boolean, default: false},
            icon: String,
            name: { type: String},
            number: { type: Boolean, default: false},
            min: { type: Number},
            elementId: { type: String},
            opt: { type: Object, default: {}},
        },
        data () {
            return {
            	itemDisabled: false,
                currentValue: this.value,
                prefixCls: 'w-input',
                slotReady: false,
                textareaStyles: {},
                isOnComposition: false,
                showPassword: false,
                options:[],
                minVal:'',
            };
        },
        mounted () {
        	let v = this;
        	if (v.opt && v.opt.options && v.opt.options.length) {
        		let l = v.opt.options;
        		v.options = __copy(l);
        	}
        	if (v.opt) {
        		if (v.opt.options && v.opt.options.length) {
	        		let l = v.opt.options;
	        		v.options = __copy(l);
	        	}
        		if (v.opt.minVal != undefined) {
        			v.minVal = v.opt.minVal;
        		}
        	}
        	if (v.min) v.minVal = v.min;
        },
        computed: {
            currentType () {
                let type = this.type;
                if (type === 'password' && this.showPassword) type = 'text';
                return type;
            },
            wrapClasses () { return ['bbx pr flex',this.class];},
            inputClasses () { return ['bd1i','hbdci','br2','wh100','bbx','pd05','pr',this.iclass]; },
            textClasses () { return ['bd1i','hbdci','br2','pd05 pdtb5 lh20 bbx w100 h60','pr',this.iclass]; },
        },
        methods: {
            handleEnter (event) { this.$emit('enter', event); },
            handleKeydown (event) { this.$emit('keydown', event);},
            handleKeypress(event) { this.$emit('keypress', event); },
            handleKeyup (event) {  this.$emit('keyup', event); },
            handleFocus (event) { this.$emit('focus', event);  },
            handleBlur (event) {  this.$emit('blur', event);  },
            handleComposition(event) {
                if (event.type === 'compositionstart') {  this.isOnComposition = true; }
                if (event.type === 'compositionend') {
                    this.isOnComposition = false;
                    this.handleInput(event);
                }
            },
            handleInput (event) {
                if (this.isOnComposition) return;
                let value = event.target.value;
                if (this.number && value !== '') value = Number.isNaN(Number(value)) ? value : Number(value);
                this.$emit('input', value);
                this.setCurrentValue(value);
                this.$emit('change', event);
            },
            handleChange (event) { this.$emit('change', event);},
            setCurrentValue (value) {
                if (value === this.currentValue) return;
                this.currentValue = value;
            },
        },
        watch: {
            value (val) {
                this.setCurrentValue(val);
            }
        }
	},
	{
		name: 'Table',
		template: `
		<div class="table-inst " name="Table-inst" >
		<table class="bd1c bbc_ w100" cellpadding=0 cellspacing=0 :id="eid">
			<thead class="thbd tbpd5">
				<tr>
					<th v-for="(v,k) in dataHead" class="resizeTh bbx " :ab="listWidth[k] ? 'aa': 'bb'" 
					:style="{'width':listWidth[k] ? listWidth[k]+'px': ''}">
						<div class="wh100 pr" v-text="v"></div>
						<div class="pa z2 t0 r-5 w10 b0 a trs2 hova1 bg03 cmw disn center" mousedown="handleResizeStart($event,k)">
							<div class="w2 h100 bgcc"></div>
						</div>
					</th>
					<th>
						<div class="flec center">
							<div v-if="enAddi" class="pd05 btn h20 hovbg03" @click="doAdd()"><i class="fa fa-plus"></i></div>
						</div>
					</th>
				</tr>
			</thead>
			<tbody class="tdmiw30 tdbd tbpd5">
				<tr v-for="(r,i) in dataList">
					<td v-for="(v,k) in r" :style="{'max-width':maxCellWidth+'px'}">
						<div v-text="v" ></div>
					</td>
					<td>
						<div class="flec center">
							<div v-if="enEdit" class="pd05 btn h20 hovbg03" @click="doEdit(r,i)"><i class="fa fa-pencil"></i></div>
							<div v-if="enDeli" class="pd05 btn h20 hovbg03" @click="doDeli(r,i)"><i class="fa fa-trash"></i></div>
							<div v-if="enConf" class="pd05 btn h20 hovbg03" @click="doConf(r,i)"><i class="fa fa-file-text"></i></div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	  	</div>`,
	  	props: {
	  		tbody: { type: Array,default: []},
	  		thead: { type: Array,default: []},
	  		fmt  : { type: Array,default: []},
	  		
	  		enadc: { type: Array,default: [0,0,0,0]},
	  	},
		data: function () {
			return {
				dataList: [],
				dataHead: [],
				enEdit: false,
				enAddi: false,
				enDeli: false,
				enConf: false,
				listWidth:[],
				styleWidth:[],
				maxCellWidth: 400,
				dragData: {
                    x: null,
                    y: null,
                    w: 0,
                    h: 0,
                    dragX: null,
                    dragY: null,
                    dragging: false,
                    resize: false,
                },
			}
		},
		watch:{
			'tbody'(){ this.setData() },
		},
		methods: {
			setData() {
				let v = this;
				let t = __copy(v.tbody);
				let n = 0;
				for (let a in t) {
					n = 0;
					for (let b in t[a]) {
						let i = t[a][b];
						if (i) {
							if ((typeof i == 'string') && i.length > 100) {
								t[a][b] = i.substr(0,40) + ' ... ';
							}
						}
						if (v.fmt[n]) {
							if (v.fmt[n].t == 'select') {
								let l = v.fmt[n].l;
								for (let k in l) if (l[k].v == i) t[a][b] = l[k].k;
							}
						}
						n++;
					}
				}
				v.dataHead = v.thead;
				v.dataList = t;
				v.enAddi = v.enadc[0];
				v.enDeli = v.enadc[1];
				v.enEdit = v.enadc[2];
				v.enConf = v.enadc[3];
				// log('setData enadc',v.fmt,t);
			},
			doEdit(r,i){this.$emit('edit',this.tbody[i],i);},
			doDeli(r,i){this.$emit('del',this.tbody[i],i);},
			doConf(r,i){this.$emit('conf',this.tbody[i],i);},
			doAdd(){
				let v = this;
				v.$emit('add');
			},
			handleResizeStart(event,k) {
				let v = this;
                let el = document.querySelectorAll('#' + v.eid + ' .resizeTh');
                if (el[k]) {
                	this.dragData.w = el[k].clientWidth;
                	v.listWidth[k] = el[k].clientWidth;
                	this.$set(this.listWidth,k,el[k].clientWidth)
                	log(k,v.listWidth[k],v.listWidth)
                	this.dragData.y = k;
                }
                console.log(this.dragData.w)
                const distance = {x: event.clientX, y: event.clientY };
                this.dragData.dragX = distance.x;
                this.dragData.resize = true;
                
                __on(window, 'mousemove', this.handleMoveMove);
                __on(window, 'mouseup', this.handleMoveEnd);
            },
            handleMoveMove (event) {
                if (this.dragData.resize) {
                	const distance = { x: event.clientX, y: event.clientY };
	                const diff_distance = { x: distance.x - this.dragData.dragX, y: distance.y - this.dragData.dragY};
	                this.dragData.w += (diff_distance.x) * 2;
	                if (this.dragData.w < 10) this.dragData.w = 10
	                this.dragData.dragX = distance.x;
	                let k = this.dragData.y;
	                if (this.listWidth[k]) {
	                	this.listWidth[k] = this.dragData.w;
	                	this.$set(this.listWidth,k,this.dragData.w)
	                }
	                return
                }
            },
            handleMoveEnd () {
                this.dragData.resize = false;
                __off(window, 'mousemove', this.handleMoveMove);
                __off(window, 'mouseup', this.handleMoveEnd);
            },
		},
		created: function () {
			let v = this;
			v.eid = 'table-' + __getid();
			v.setData()
		},
	},
	{
		name:'Modal',
		template:`
		<div name="modal-widget" :id="eid" :class="className">
	        <transition name="fade">
	            <div class="mask" class="pf t0 l0 b0 r0 bg03" v-show="visible" v-if="showMask" @click="handleMask"></div>
	        </transition>
	        <div name="modalWrap" style="z-index:-1">
	            <transition :name="draggable?'modal-fade':'slide'" @after-leave="animationFinish">
	                <div name="zindex"  class="modal pf t0 l0 bbx" :style="mainStyles"  v-show="visible" >
	                    <div class="bgf shadow pf mah90p" name="position"  ref="content" :style="contentStyles" @click="handleClickModal">
	                    	<div class="fs14 ofh wh100 flex flc" >
	                    		<div class="modal-header w100 h40 flex alc pdl10 bbx pr bb1d " v-if="showHeader">
	                    			<div class="flex1 h100 ofh flex alc cm" @mousedown="handleMoveStart">
	                    				<div class="w100 txt fs15 left"><span name="title" v-html="title"></span></div>
	                    			</div>
		                        	<div class="close-icon btn w50 h40 pd010 pdtb5" v-if="closable">
		                        		<div class="wh100 trs2 hovbg01 btn" @click="close"><i class="fa fa-close"></i></div>
		                        	</div>
		                        </div>
		                        <div class="modal-body bb1c w100 flex1 ovy"><slot></slot></div>
		                        <div class="modal-footer bgf w100" v-if="showHeader">
		                            <div name="footer" class="flex alc right pdtb10 bbx pd020 pr">
		                            	<div class="pa b0 r0 h30 w30 a hova1 trs2 bgb3 cmse" @mousedown="handleResizeStart">
		                                	<div class="w25 h25 bgf"></div>
		                                </div>
		                                <button class="btn bdn w60 bbtn btnh hvop08 cfff br3 pr" @click="cancel" v-if="cancelText !='-0'">
		                                	<div v-html="localeCancelText"></div>
		                                </button>
		                                <button class="btn bdn w60 bbtn btnh hvop08 cfff br3 pr marl10" :loading="buttonLoading" @click="ok">
		                                	<div v-html="localeOkText"></div>
		                                </button>
		                            </div>
		                        </div>
	                    	</div>
	                    </div>
	                </div>
	            </transition>
	        </div>
	    </div>
		`,
        props: {
            value: {type: Boolean, default: false },
            closable: { type: Boolean,default: true },
            maskClosable: { type: Boolean,default: true},
            title: { type: String},
            area: { type: String},
            width: {type: [Number, String],default: 520 },
            okText: {type: String,default: '确定' },
            cancelText: {type: String,default: '取消'},
            loading: { type: Boolean, default: false },
            styles: {
                type: Object,
                default () { return {}; }
            },
            className: {type: String },
            header: { type: Number, default: 1 },
            mask: { type: Boolean,default: false},
            drag: { type: Boolean,default: true },
        },
        data () {
            return {
            	draggable: false,
                prefixCls: 'w-modal',
                wrapShow: false,
                showHeader: true,
                buttonLoading: false,
                
                dragData: {
                    x: null,
                    y: null,
                    w: 0,
                    h: 0,
                    dragX: null,
                    dragY: null,
                    dragging: false,
                    resize: false,
                },
                modalIndex: this.handleGetModalIndex(),  // for Esc close the top modal
                eid: 'modal',
                left: 0,
                top: 0,
                right:0,
                bottom:0,
            };
        },
        created () {
        	let v = this;
        	v.eid = 'modal-' + __getid();
        	
        },
        computed: {
        	visible() {return this.value } ,
            mainStyles () {
                let style = {};
                const customStyle = this.styles ? this.styles : {};
                Object.assign(style, customStyle,{zIndex: this.modalIndex + this.zIndex} );
                return style;
            },
            contentStyles () {
                let style = {};
                if (this.dragData.x !== null) style.left = `${this.dragData.x}px`;
                if (this.dragData.y !== null) style.top = `${this.dragData.y}px`;
                const width = this.dragData.w || parseInt(this.width);
                const height = this.dragData.h;
                const styleWidth = {width: `${width}px`};
                if (height) style.height = `${height}px`;
                Object.assign(style, styleWidth);
                return style;
            },
            localeOkText () {return this.okText; },
            localeCancelText () {return this.cancelText; },
            showMask () { return this.mask; }
        },
        methods: {
            close () { this.visible = false; this.$emit('cancel'); },
            cancel () { this.close(); },
            ok () { this.$emit('ok');},
            handleMask () {
            	console.log('handleMask',this.maskClosable,this.showMask)
            	if (this.maskClosable && this.showMask)  this.close();
            },
            animationFinish() {  this.$emit('hidden');},
            handleMoveStart (event,listen) {
            	if (this.drag) this.draggable = true;
                if (!this.draggable) return false;
                const $content = this.$refs.content;
                const rect = $content.getBoundingClientRect();
                this.dragData.x = rect.x || rect.left;
                this.dragData.y = rect.y || rect.top;
                const distance = {x: event.clientX, y: event.clientY };
                this.dragData.dragX = distance.x;
                this.dragData.dragY = distance.y;
                this.dragData.dragging = true;
                if (!listen){
                	__on(window, 'mousemove', this.handleMoveMove);
                	__on(window, 'mouseup', this.handleMoveEnd);
                }
            },
            handleResizeStart(event,listen) {
                const $content = this.$refs.content;
                const rect = $content.getBoundingClientRect();
                this.dragData.w = rect.width;
                this.dragData.h = rect.height;
                const distance = {x: event.clientX, y: event.clientY };
                this.dragData.dragX = distance.x;
                this.dragData.dragY = distance.y;
                this.dragData.resize = true;
                if (!listen){
                	__on(window, 'mousemove', this.handleMoveMove);
                	__on(window, 'mouseup', this.handleMoveEnd);
                }
            },
            handleMoveMove (event) {
                if (this.dragData.dragging) {
                	const distance = { x: event.clientX, y: event.clientY };
	                const diff_distance = { x: distance.x - this.dragData.dragX, y: distance.y - this.dragData.dragY};
	                this.dragData.x += diff_distance.x;
	                this.dragData.y += diff_distance.y;
	                this.dragData.dragX = distance.x;
	                this.dragData.dragY = distance.y;
	                return
                }
                if (this.dragData.resize) {
                	const distance = { x: event.clientX, y: event.clientY };
	                const diff_distance = { x: distance.x - this.dragData.dragX, y: distance.y - this.dragData.dragY};
	                this.dragData.w += diff_distance.x;
	                this.dragData.h += diff_distance.y;
	                this.dragData.dragX = distance.x;
	                this.dragData.dragY = distance.y;
	                return
                }
            },
            handleMoveEnd () {
                this.dragData.dragging = false;
                this.dragData.resize = false;
                __off(window, 'mousemove', this.handleMoveMove);
                __off(window, 'mouseup', this.handleMoveEnd);
            },
            handleGetModalIndex () { 
            	transferIncrease();
                return __transferIndex;
            },
            handleClickModal () {
                this.modalIndex = this.handleGetModalIndex();
            },
            initPosition (event) {
            	let v = this;
            	var id = v.eid;
                let mw = v.width;
                let dw = document.body.clientWidth;
                let dh = document.body.clientHeight;
            	const stl = parseInt(this.contentStyles.width);
            	if (!v.dragData.x) {
            		v.dragData.x = ((mw - stl) * 0.5);
            		if (v.dragData.x < 1){v.dragData.x = ((dw - mw) * 0.5);}
            	}
            	if (!v.dragData.y) v.dragData.y = dh * 0.25;
            }
        },
        mounted () {
        	let v = this;
            if (this.visible) { this.wrapShow = true;}
            this.showHeader = parseInt(this.header) ? true : false
            v.initPosition(v.area);
        },
        beforeDestroy () {
            if (this.head) this.head.removeEventListener('mousedown',this.handleMoveStart);
        },
        watch: {
            value (val) {
                if (val === false) {
                    this.buttonLoading = false;
                    this.timer = setTimeout(() => {
                        this.wrapShow = false;
                    }, 300);
                } else {
                    this.modalIndex = this.handleGetModalIndex();
                    if (this.timer) clearTimeout(this.timer);
                    this.wrapShow = true;
                }
                this.$emit('visible-change', val);
            },
            loading (val) {
                if (!val) {
                    this.buttonLoading = false;
                }
            },
        }
	},
	{
		name: 'Page',
		template:`
		<div :class="fqWrapClass">
			<slot name="content"></slot>
			<div name="tool-box-page" class="pf z2 t0 r5 hovchh30">
				<div class="pdtb5 pd05 hovchh30_ch ofh">
					<div v-if="panelIndex==1" class="wh30 btn bg01 opa5 trs2 hovopa1" @click="panelIndex = 2">
						<i class="fa fa-th-list"></i>
					</div>
					<div v-if="panelIndex==2" class="wh30 btn bg01 opa5 trs2 hovopa1" @click="panelIndex = 1">
						<i class="fa fa-close"></i>
					</div>
					<div v-if="panelIndex==3" class="wh30 btn bg01 opa5 trs2 hovopa1" @click="panelIndex = 2">
						<i class="fa fa-reply"></i>
					</div>
				</div>
			</div>
			<transition name="fade">
				<div v-if="panelIndex == 2" name="setting-panel" class="flex flc ofh">
					<!--第一行-->
					<div class="w100">
						<div class="h40 flec pd05 bbx">
							<div class="btn tbb cfff trs2 hvop08 w90 tbh pd05" @click="showAdd">
								<i class="fa fa-plus marr5"></i><span>添加</span>
							</div>
							<div class="flex1"></div>
						</div>
						<div class="h5 bgf1"></div>
					</div>
					<!--表-->
					<div class="flex1 flex flc ofh bgf custom_ui-content" >
						<div class="wh100 ovy bgf bbx pd05" name="plan-list">
							<Table :tbody="dataView" :thead="dataHead" :fmt="dataVfmt" :enadc="[1,0,1,1]" class="thbdlr w100 ofh center lh30"
							@edit="showEdit" @add="showAdd" @conf="doConf"></Table>
						</div>
					</div>
					<Modal v-model="addModal" @ok="doSaveAdd" @cancel="addModal = false"
						okText = "添加" cancelText="取消" width="500" title="添加组件">
				        <div class="bgf pdtb10 pd010">
				        	<div class="pdtb10 pd010">
					        	<div class="pdl40 flex alc flex" >
									<div class="w70 justify-all marr10"><span class="flex1">组件名称</span></div>
									<input class="bd1i hbdci bbx trs2 br3 pd05 h30 w200" v-model="info.f" />
								</div>
				        	</div>
				        </div>
				    </Modal>
				    <Modal v-model="editModal" @ok="doSaveEdit" @cancel="editModal = false"
						okText = "保存" cancelText="取消" width="500" title="修改">
				        <div class="bgf pdtb10 pd010">
				        	<div class="pdtb10 pd010">
					        	<div class="pdl40 flex alc flex" >
									<div class="w70 justify-all marr10"><span class="flex1">组件名称</span></div>
									<input class="bd1i hbdci bbx trs2 br3 pd05 h30 w200" v-model="info.f" />
								</div>
								<div v-if="info.c==2" class="pdl40 flex alc flex mart10" >
									<div class="w70 justify-all marr10"><span class="flex1">组件名称</span></div>
									<Input type="textarea" class="flex1"  v-model="info.g" />
								</div>
				        	</div>
				        </div>
				        
				    </Modal>
				</div>
				<div v-if="(panelIndex == 3) || (panelIndex == 1)" name="setting-panel-item" class="wh100 flex flc ofh">
					<!--第一行-->
					<div class="w100" v-if="panelIndex == 3" name="addmodel">
						<div class="h40 flec pd05 bbx">
							<div class="btn tbb cfff trs2 hvop08 w90 tbh pd05" @click="showAddItem()">
								<i class="fa fa-plus marr5"></i><span>添加模块</span>
							</div>
							<div class="flex1"></div>
						</div>
						<div class="h5 bgf1"></div>
					</div>
					<!--内容-->
					<div class="flex1 flex ofh bgf preview" >
						<div class="flex1 h100 ofh bgf" name="plan-list-box">
							<div class="wh100 _ofh ovy bgf pr bbx" :id="ctx_box_id" >
								<div v-for="(v,k) in itemList" :style="v.styles" :id="'element-'+k" 
									:class="[(panelIndex == 1 && itemList.length > 1) || (panelIndex == 3) ? 'hovbd1i':'',
									(v.showHead) ? 'bd1if':'bd1x']" >
									<div class="wh100 bbx _sshadow flex flc miw101 mih100 pr" >
										<div v-if="v.resize == 1" class="trs2 h10 hovh35 ofh" 
											:class="[(v.resize || (panelIndex == 3))?'cm z2':'']" >
											<div class="layUiH flec bb1c bgf1 pr a"
												@mousedown="mousedown($event,v,k,1)">
												<div class="flec flex1 h100 bbx pd05 sen pdl45" v-text="v.title"></div>
											</div>
										</div>
										<div class="w100 h100 trs2 ofh pa t0 l0 z1" @click="selectModel(k)">
											<div class="pr wh100 bbx">
												<div class="wh100 bbx ofh" name="widget-item-box" v-if="v.dataKey == -1 || v.dataKey == '-1'">
													<DataTableChart ref="models"
														:title="v.title"
														:show="!(itemIndex == k && dragData.moveing)" 
														:trans="v.resize" 
														:control="v.control" 
														:header="panelIndex == 3 || v.showHead" 
														:bgcolor="v.bgColor" 
														:ftcolor="v.ftColor" 
														v-model="v.dataInfo" 
														@update="updateDataInfo(k,v)"
														@setmax="setMax(k,v,1)"
														@setmin="setMax(k,v,0.5)"
														@setzindexup="setZindex(k,v,0)"
														@setzindexdown="setZindex(k,v,1)"
													>
													</DataTableChart>
												</div>
												<div v-else-if="v.dataKey[0] == '/'" class="wh100 bbx ofh" :name="'router-view-'+v.dataKey">
													<router-view :key="k" ref="models" :path='v.dataKey' >
													</router-view>
												</div>
												<div v-else class="wh100 bbx ofh" name="widget-component-box">
													<component :key="k" ref="models" :is='v.dataKey' class="widget-component"></component>
												</div>
												
											</div>
											<div v-if="panelIndex==3 || v.resize">
												<div class="pa b0px r0px w40 h40 trs2 bdrb5 hbdci cmse" action-dir 
													v-if="v.left && v.top" @mousedown="mousedown($event,v,k,2,1)" >
												</div>
												<div class="pa b0px l0px w40 h40 trs2 bdlb5 hbdci cmsn" 
													v-if="v.right && v.top" @mousedown="mousedown($event,v,k,2,2)" >
												</div>
												<div class="pa t0px r0px w40 h40 trs2 bdrt5 hbdci cmsn" 
													v-if="v.left && v.bottom" @mousedown="mousedown($event,v,k,2,3)" >
												</div>
												<div class="pa t0px l0px w40 h40 trs2 bdlt5 hbdci cmse " 
													v-if="v.right && v.bottom" @mousedown="mousedown($event,v,k,2,4)" >
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!--右边-->
						<div class="w300 h100 flex flc bdl1c" v-if="panelIndex == 3">
							<div class="h40 bb1c bbx flec">
								<div class="flex1"></div>
								<div class="tbh disn caaa pd05">
									<div class="flex alc w20 btn bgce hovbg01 ">
										<i class="fa fa-angle-left"></i>
									</div>
									<div class="w1"></div>
									<div class="flex alc w20 btn bgce hovbg01 c666 ">
										<i class="fa fa-angle-right"></i>
									</div>
								</div>
								<div v-show="listTab == 2" class="marr5">
									<div class="flex alc lh25 pd05 btn bgcg cfff hovopa8" @click="saveItem">
										<i class="fa fa-save"></i>
										<span class="marl5" >保存</span>
									</div>
								</div>
							</div>
							<div class="flex1 w100 ofh">
								<div class="wh100 pr ovy">
									<div name="node-list" class="wh100 ovy pr t0 l0">
										<div v-for="(v,k) in itemList" >
											<div class="tih flec tibb trs2 hovbgf1" :class="[itemIndex == k ? 'bgcc':'']">
												<div class="w101 pd05 left sen">模块名称</div>
												<div class="" v-text="v.title"></div>
											</div>
										</div>
									</div>
									<div name="node" class="wh100 ovy pa t0 trs2 alc bgf" :class="[listTab == 1?'l100':'l0']">
										<div class="tih flec tibb">
											<div class="w101 pd05">模块名称</div>
											<input class="ibd br2 pd05 h25 w120" v-model="model.title" @change="updateItem" />
										</div>
										
										<div class="tih flec tibb">
											<div class="w101 pd05">左边距离</div>
											<input class="ibd br2 pd05 h25 w120" v-model="model.left" @change="updateItem" />
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">上边距离</div>
											<input class="ibd br2 pd05 h25 w120" v-model="model.top" @change="updateItem" />
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">右边距离</div>
											<input class="ibd br2 pd05 h25 w120" v-model="model.right" @change="updateItem" />
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">下边距离</div>
											<input class="ibd br2 pd05 h25 w120" v-model="model.bottom" @change="updateItem" />
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">组件宽度</div>
											<input class="ibd br2 pd05 h25 w120" v-model="model.width" @change="updateItem" />
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">组件高度</div>
											<input class="ibd br2 pd05 h25 w120" v-model="model.height" @change="updateItem" />
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">数据内容</div>
											<select class="ibd br2 pd05 h25 w120" v-model="model.dataKey" change="updateItem">
												<option value="-1">自定义内容</option>
												<option v-for="(v,k) in widgets" :value="v.v" v-text="v.k">自定义内容</option>
											</select>
											<div class="w50 h25 marl5 disn bgf1 hovbg03" _click="showDataConfList">
												<span class="cb2">管理</span>
											</div>
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">数据配置</div>
											<select class="ibd br2 pd05 h25 w120" v-model="model.control" @change="updateItem">
												<option value="1" >启用</option>
												<option value="0" >禁用</option>
											</select>
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">布局配置</div>
											<select class="ibd br2 pd05 h25 w120" v-model="model.resize" @change="updateItem">
												<option value="1" >启用</option>
												<option value="0" >禁用</option>
											</select>
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">工具栏与边框</div>
											<select class="ibd br2 pd05 h25 w120" v-model="model.showHead" @change="updateItem">
												<option :value="1" >启用</option>
												<option :value="0" >禁用</option>
											</select>
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">背景颜色</div>
											<div class="w30 h25 pr bd1c br2 bbx ofh" :style="{'background':model.bgColor||''}">
												<input class="a bbx wh100 bdn" type="color" v-model="model.bgColor" @change="updateItem" />
											</div>
											<input class="ibd br2 pd05 h25 w90" type="text" v-model="model.bgColor" @change="updateItem" />
										</div>
										<div class="tih flec tibb">
											<div class="w101 pd05">字体颜色</div>
											<div class="w30 h25 pr bd1c br2 bbx ofh" :style="{'background':model.ftColor||''}">
												<input class="a bbx wh100 bdn" type="color" v-model="model.ftColor" @change="updateItem" />
											</div>
											<input class="ibd br2 pd05 h25 w90" type="text" v-model="model.ftColor" @change="updateItem" />
										</div>
										<!--<el-input placeholder="请输入内容" type="color" v-model="model.bgColor" clearable></el-input>-->
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</transition name="fade">
			
		</div>
		`,
		props: { 
			value: { type: Number,  default: 2},
			class: { type: String,  default: ''},
			name:  { type: String,  default: ''},
			ctrl:  { type: Boolean, default: true},
			ctrl:  { type: Boolean, default: true},
			defctx:{ type: Boolean, default: true},
			box:   { type: String,  default: 'div[name=content]'},
			widgets:{type: Array,  default: []}
		},
        data () {
        	return {
            	position:{top: 0,left: 0,width: 0,height: 0,},
	        	config_type: 82,
	        	nextId: 1,
	        	thead: [
					{sort:0,class:'w40',key:'a',name:'ID',  type: 'text'},
					{sort:0,class:'',key:'c', name:'类型', type: 'text'},
					{sort:0,class:'',key:'f', name:'名称', type: 'text'},
				],
				item: {},
				itemIndex: -1,
				model:{},
				listTab: 1,
				info:{},
				dataList: [],
	        	dataView: [],
	        	dataHead: [],
	        	dataVfmt: [],
	        	itemList: [],
	        	menu: [],
	        	options: [],
				addModal: false,
				editModal: false,
				editIndex: -1,
				delModal: false,
				delIndex: -1,
				confitureModal: false,
				panelIndex: 1,
				dataIndex: -1,
				mIndex: __transferIndex,
				dragData: { x: null, y: null, dragX: null, dragY: null, dragging: false,moveing:false},
				ctx_box_id: 'qp',
				rect: {},
           };
        },
        computed: {
        	fqWrapClass () { return [this.class,'CustomQuery-inst wh100'];},
        },
        watch:{
        	'value' (val) {this.panelIndex = parseInt(val);},
        	'$route' (val) {
        		console.log('watch route',val);
        		let v = this;
        		if (v.menu.length) {
					v.getConfigList()
        		} else {
        			v.getMenuInfo(1);
        		}
        	}
        },
        created: function() {
        	let v = this;
        	v.getMenuInfo(1);
        	v.ctx_box_id = 'qp-' + Date.now();
        	window._getStyle = function (el) {
        		let stl = {};
        		let sw = {width:  el.width};
        		let sh = {height: el.height};
        		let st = {top:    el.top};
        		let sr = {right:  el.right};
        		let sb = {bottom: el.bottom};
        		let sl = {left:   el.left};
        		let ds = {display:''};
        		let dr = {flexDirection:''};
        		let al = {alignItems:''};
        		let ju = {justifyContent:''};
        		let ps = {position:''};
        		let zi = {zIndex: el.zindex};
        		if (el.left && el.right) {
        			el.width = '';
        			sw.width = '';
        		}
        		if (el.top && el.bottom) {
        			el.height = '';
        			sw.height = '';
        		}
        		if (el.type === 2) {
        			ds.display = 'flex';
        			ds.alignItems = el.valign;
        			ds.justifyContent = el.halign;
        			dr.flexDirection = el.direction;
        		} else {
        			ps.position = 'absolute';
        		}
                Object.assign(stl,sw,sh,st,sr,sb,sl,ds,dr,al,ju,ps,zi);
                return stl;
        	}
        },
        mounted () {
        	let v = this;
        },
        beforeDestroy () {
        },
        methods: {
        	showAddItem (type) {
        		let v = this;
        		let m = {
        			type: type || 1, // 1 元素 2 布局
        			top:'20%',
        			right:'',
        			bottom:'',
        			left:'10%',
        			width:'80%',
        			height:'60%',
        			direction:'row', //1横向 2 纵向
        			valign:'center',
        			halign:'center',
        			selected: true,
        			zindex: 1,
        			showHead: 1,
        			control: 1,
        			back:'',
        			color:'',
        			styles:{},
        			title:'页面模块' + (v.itemList.length + 1),
        			dataKey: -1,
        			dataId: -1,
        			dataInfo: {},
        			size:['80%','60%'],
        			resize: 1,
        			bgColor: '#ffffff',
        			ftColor: '#ffffff',
        			filter: [],
        		};
        		m.styles = _getStyle(m);
        		v.itemList.push(m);
        		// console.log('itemList',v.itemList);
        		v.selectModel(v.itemList.length -1)
        	},
        	selectModel (k) {
        		let v = this;
        		v.itemIndex = k;
        		for (let i in v.itemList) {
            		v.itemList[i].zindex = 1;
            		v.itemList[i].styles = _getStyle(v.itemList[i]);
            	}
            	v.itemList[k].zindex = 2;
            	v.itemList[k].styles = _getStyle(v.itemList[k]);
            	v.model = v.itemList[k];
            	v.listTab = 2;
        	},
        	updateDataInfo (k,i) {
        		let v = this;
        		let item = v.item;
				let info = {a:'',b:'',c:'', d:'',e:'',f:'',g:''};
				for (let k in info) {info[k] = item[k];}
				let data = {data: v.itemList,};
				info.g = data;
				v.info = info;
				console.log('updateDataInfo to save',v.info);
				//v.doSaveEdit();
        	},
        	saveItem () {
        		let v = this;
        		let item = v.item;
				let info = {a:'',b:'',c:'', d:'',e:'',f:'',g:''};
				for (let k in info) {info[k] = item[k];}
				let data = {data: v.itemList,}
				info.g = data;
				v.info = info;
				console.log('conf saveItem',v.info);
        		v.doSaveEdit();
        	},
        	
        	mousedown (event,i,k,opa,brltrl) {
        		let v = this;
        		v.selectModel(k);
        		if (!i.resize && (v.panelIndex==1)) return;
        		v.action = opa;
        		v.actionDir = brltrl || v.actionDir;
        		let el = document.getElementById('element-'+k);
                let rect = el.getBoundingClientRect();
        		let bx = document.getElementById(v.ctx_box_id);
                let rc   = bx.getBoundingClientRect();
                v.rect   = rc;
                let scrollY = 0;
                if (bx.scrollTop > 0) {
                	scrollY = bx.scrollTop;
                }
                this.dragData.x  = rect.left   - rc.left;
                this.dragData.y  = rect.top    - rc.top      + scrollY;
                this.dragData.z  = rc.right    - rect.right;
                this.dragData.w  = rc.bottom   - rect.bottom;
                this.dragData.sw = rect.width;
                this.dragData.sh = rect.height;
                const distance = {x: event.clientX, y: event.clientY };
                this.dragData.dragX = distance.x;
                this.dragData.dragY = distance.y;
                this.dragData.dragging = true;
                __on(window, 'mousemove', this.handleMoveMove);
                __on(window, 'mouseup',   this.handleMoveEnd );
            },
            handleMoveMove (event) {
                if (!this.dragData.dragging) return false;
                this.dragData.moveing = true;
                const distance = { x: event.clientX, y: event.clientY };
                const diff_distance = { x: distance.x - this.dragData.dragX, y: distance.y - this.dragData.dragY};
                let i = this.dragData
                if (this.action === 1) {
                	this.dragData.x += diff_distance.x;
	                this.dragData.y += diff_distance.y;
	                this.dragData.z -= diff_distance.x;
		            this.dragData.w -= diff_distance.y;
	                this.dragData.dragX = distance.x;
	                this.dragData.dragY = distance.y;
                	this.updateItemPosition();
                } else {
		            this.dragData.dragX = distance.x;
		            this.dragData.dragY = distance.y;
                	if(this.actionDir === 1) {
                		this.dragData.sw += diff_distance.x;
		            	this.dragData.sh += diff_distance.y;
                	}
                	if(this.actionDir === 2) {
                		this.dragData.sw -= diff_distance.x;
		            	this.dragData.sh += diff_distance.y;
                	}
                	if(this.actionDir === 3) {
                		this.dragData.sw += diff_distance.x;
		            	this.dragData.sh -= diff_distance.y;
                	}
                	if(this.actionDir === 4) {
                		this.dragData.sw -= diff_distance.x;
		            	this.dragData.sh -= diff_distance.y;
                	}
                	this.updateItemSize();
                }
            },
            handleMoveEnd () {
            	let v = this;
                this.dragData.dragging = false;
                this.dragData.moveing = false;
                if (v.$refs && v.$refs.models && v.$refs.models[v.itemIndex]) {
                	if (v.$refs.models[v.itemIndex].resize) v.$refs.models[v.itemIndex].resize();
                }
                __off(window, 'mousemove', this.handleMoveMove);
                __off(window, 'mouseup', this.handleMoveEnd);
            },
            updateItem () {
            	let v = this;
            	let i  = v.itemList[v.itemIndex];
            	if (i.left && i.right) { i.width = '';  }
            	if (i.top && i.bottom) { i.height = ''; }
            	i.control = parseInt(v.model.control) || 0;
            	i.resize  = parseInt(v.model.resize) || 0;
            	i.styles  = _getStyle(i);
            	console.log('updateItem control resize',i.control,i.resize,i)
            },
            updateItemSize () {
            	let v = this;
            	let style = {};
            	let i  = v.itemList[v.itemIndex];
            	if (i.width) {
            		style.width = `${this.dragData.sw}px`;
            		if (i.width.indexOf('%') > -1) style.width = (100*v.dragData.sw/v.rect.width).toFixed(4) + '%';
            		if (i.left && i.right) i.right = '';
            		i.width = style.width;
            	} else {
            		style.width = (100*v.dragData.sw/v.rect.width).toFixed(4) + '%';
            		i.width = style.width;
            	}
            	if (i.height) {
            		style.height = `${this.dragData.sh}px`;
            		if (i.height.indexOf('%') > -1) style.height = (100*v.dragData.sh/v.rect.height).toFixed(4) + '%';
            		if (i.top && i.bottom) i.bottom = ''
            		i.height = style.height;
            	} else {
            		style.height = (100*v.dragData.sh/v.rect.height).toFixed(4) + '%';
            		i.height = style.height;
            	}
            	if (i.left)  i.right  = '';
            	if (i.top )  i.bottom = '';
            	if (i.right) i.left   = '';
            	if (i.bottom)i.top    = '';
            	i.styles = _getStyle(i);
            },
            updateItemPosition () {
            	let v = this;
            	let style = {};
            	let i  = v.itemList[v.itemIndex];
            	if (i.left) {
            		style.left = `${this.dragData.x}px`;
            		if (i.left.indexOf('%') > -1) style.left = (100*v.dragData.x/v.rect.width).toFixed(4) + '%';
            		i.left = style.left;
            	} else if (i.right) {
            		style.right = `${this.dragData.x}px`;
            		if (i.right.indexOf('%') > -1) style.right = (100*v.dragData.z/v.rect.width).toFixed(4) + '%';
            		i.right = style.right;
            	}
            	if (i.top ) {
            		style.top  = `${this.dragData.y}px`;
            		if (i.top.indexOf('%') > -1) style.top = (100*v.dragData.y/v.rect.height).toFixed(4) + '%';
            		i.top  = style.top;
            	} else if (i.bottom) {
            		style.bottom  = `${this.dragData.y}px`;
            		if (i.bottom.indexOf('%') > -1) style.bottom = (100*v.dragData.w/v.rect.height).toFixed(4) + '%';
            		i.bottom  = style.bottom;
            	}
            	i.styles= _getStyle(i);
            },
        	setMax (k,i,per) {
        		this.selectModel(k);
            	this.itemIndex = k;
            	if (per == 1) {
            		let lastPos = {width: i.width,height: i.height,top: i.top,left: i.left,bottom: i.bottom,right: i.right,}
            		if (!i.lastPos) i.lastPos = lastPos;
            		i.width  = '100%';
            		i.height = '100%';
            		i.top    = '0%';
            		i.left   = '0%';
            		i.bottom = '';
            		i.right  = '';
            	} else {
            		if (i.lastPos) {
            			let l    = i.lastPos;
            			i.width  = l.width;
	            		i.height = l.height;
	            		i.top    = l.top;
	            		i.left   = l.left;
	            		i.bottom = l.bottom;
	            		i.right  = l.right;
            		} else {
            			let lastPos = {width: i.width,height: i.height,top: i.top,left: i.left,bottom: i.bottom,right: i.right,}
	            		i.lastPos = lastPos;
	            		i.width  = '80%';
	            		i.height = '60%';
	            		i.top    = '20%';
	            		i.left   = '10%';
	            		i.bottom = '';
	            		i.right  = '';
            		}
            	}
            	i.styles = _getStyle(i);
        	},
        	openSetting(k,i,f){
        		let v = this;
        		if (v.$refs && v.$refs.models && v.$refs.models[k] && v.$refs.models[k].openSetting) {
        			v.$refs.models[k].openSetting();
        		}
        	},
        	setZindex(k,i,z) {
        		i.drag = z ? 0 : 1;
        	},
        	close (flag=1) { 
        		this.panelIndex = flag;
        		this.$emit('input',flag);
        	},
			getMenuInfo(flag) {
				let v = this;
				v.getConfigList();
			},
			doConf (i,k) {
				let v = this;
				v.itemList = [];
				i = __copy(v.dataList[k]);
				if (i.g) {
					if (typeof i.g == 'string') {
						try{
							i.g = JSON.parse(i.g);
						}catch(e){}
					}
					if (i.g.data) v.itemList = i.g.data;
				}
				v.item = __copy(v.dataList[k]);
				console.log('doConf',k,i,v.item);
				v.panelIndex = 3;
			},
        	showAdd () {
        		let v = this;
				let info = {a:v.nextId,b:1,c:3,d:0,e:0,f:'',g:''};
				v.info = info;
				v.addModal = true;
        	},
        	doSaveAdd: function () {
				let v = this;
				let uri = __url()
				let data = {action:'insert',data:v.info};
				__post({url:uri,data: data}).then((r) => {
					if (r.code === 200) {
						__msg(r,data);
						setTimeout(function(){v.addModal = false;v.getConfigList();},300)
					}
				});
			},
			showEdit: function (i,k) {
				let v = this;
				v.editIndex = k;
				info = {a:v.nextId,b:1,c:3,d:0,e:0,f:'',g:''};
				i = v.dataList[k];
				for (let k in info) {info[k] = i[k];}
				v.info = info;
				v.editModal = true;
			},
			doSaveEdit: function () {
				let v = this;
				let uri = __url();
				let t = __copy(v.info);
				log('typeof t.g',typeof t.g)
				if (t.g && (typeof t.g == 'object')) {
					t.g = JSON.stringify(t.g);
				}
				let data = {action:'update',data:t};
				__post({url:uri,data: data}).then((r) => {
					if (r.code === 200) {
						__msg(r,data);
						setTimeout(function(){v.editModal = false;v.getConfigList();},300)
					}
				});
			},
			getConfigList () {
        		let v = this;
				let uri = __url()
				let data = {action: 'query',data:{where:{eq:{c:'3 OR c = 2'}},},desc:'get-component',};
				log('getConfigList',data)
				__post({url:uri,data: data}).then((r) => {
					if (r.code === 200) {
						v.nextId = r.count + 1;
						let l  = r.data;
						let list = [];
						for (let i = 0; i < l.length; i++) {
							let it = {a:'',c:'',f:'',g:''};
							for (let k in it) it[k] = l[i][k];
							if (it.g) {
								try{
									let js = JSON.parse(it.g);
									if (it.g.data) it.g = js;
								} catch(e){
									log(e)
								}
							}
							list.push(it);
						}
						v.dataHead = ['ID','类型','名称','内容'];
						v.dataView = list;
						v.dataVfmt = [0,{t:'select',l:[{k:'网页',v:2},{k:'组件',v:3},]},0,0];
						v.dataList = l;
					}
				}).catch((e) => {console.log('error', e);});
        	}
		}
	},
	{
		name: 'DataTableChart',
		template:`
		<div :class="widgetClass" class="DataTable wh100 pr flex flc" :style="[bgStyle]">
			<div  class="layUiH w100 bbx bb1c flec title" v-if="showHeader">
				<div class="layUiH w100 flec bb1c bgf1 pr z2" >
					<div class="flec h100 bbx pd05 sen pdl45"v-text="title"></div>
					<div class="flex1 h100"  ></div>
					<div class="flec bd1x c666" >
						<div v-if="trans || (panelIndex == 3)" class="marl10 w30 h25 btn hovbg01" @click="setMax(0.5)">
							<i class="fa fa-window-restore"></i>
						</div>
						<div v-if="trans || (panelIndex == 3)" class="marl10 w30 h25 btn hovbg01" @click="setMax(1)">
							<i class="fa fa-window-maximize"></i>
						</div>
						<div v-if="control || (panelIndex == 3)" class="marl10 w30 h25 btn hovbg01" @click="openSetting(1)">
							<i class="fa fa-cog"></i>
						</div>
						<div v-if="paramsList.length" class="marl10 " >
							<div class="w30 h25 btn hovbg01" @click="openFilter(1)"><i class="fa fa-filter"></i></div>
							<ParamsFilter v-model="filter" ref="filter" :content="0" @update="doQuery" @close="setFliter(1)"></ParamsFilter>
						</div>
					</div>
				</div>
			</div>
			<div name="table-item" class="w100 flex1 pr pr ofh">
				<div class="wh100 pr">
					<div v-show="displayStatus" name="custom-card" class="flex flc ofh center wh100 pr hovchh30">
						<div class="w100 flex1 ofh" name="table-content">
							<div v-show="displayType == 1 && show" name="table" class="wh100 ofh flex flc " >
								<div class="w100 table-header ofh">
									<table cellspacing="0" cellpadding="0" class="w100 center tbn">
										<thead><tr class="fs14">
											<th v-if="showIndex" class="theadborder">序号</th>
											<th v-for="(v,k) in thead"  class="theadborder ">
												<div class="pr lh30 flex alc center pdtb5">
													<div v-text="v.name"></div>
													<Sort v-if="v.sort" :sort="v.sort" @asc="sortChange(v,2)" @desc="sortChange(v,3)"></Sort>
													</div>
											</th>
										</tr></thead>
										<tbody class="h1 w100 ofh a">
											<tr class="fs14  " v-for="(row,i) in dataList">
												<td v-if="showIndex"><div class="h0 ofh">序号</div></td>
												<td v-for="(v,k) in row"><div class="h0 ofh" v-text="v.val">value</div></td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="w100 flex1 ofh table-body">
									<div class="wh100 ovy">
										<table cellspacing="0" cellpadding="0" class="w100 center tbn">
											<thead class="h1 a ofh"><tr class="fs14 lh20 ">
												<th v-if="showIndex"><div class="h0 ofh">序号</div></th>
												<th v-for="(v,k) in thead" >
													<div class="pr h0 ofh flex alc center">
													<div v-text="v.name"></div>
													<Sort v-if="v.sort" ></Sort>
													</div>
												</th>
											</tr></thead>
											<tbody>
											<tr class="fs14 lh20 trs2 hovbgf01 _hovbgcc" v-for="(row,i) in dataList">
												<td v-if="showIndex" class="tbodyborder"><div class="pdtb10" v-text="i + 1"></div></td>
												<td v-for="(v,k) in row" v-text="v.val" class="tbodyborder lh20 pdtb10"></td>
											</tr>
											</tbody>
										</table>
									</div>
								</div>
							</div>
							<div v-show="displayType == 2" name="chart" class="wh100 flex flc" >
								<div class="wh100 ofh" :id="cid"></div>
							</div>
							<div v-show="displayType == -1" name="contentText" class="wh100 flex flc" >
								<div class="wh100 ofh" :id="cid" v-html="ctxText"></div>
							</div>
						</div>
						<div name="page" v-if="total_page >1" class="hovchh30_ch_h0 h30 bgf ofh trs2 opa5 hovopa1" >
							<div class="item-shadow bb1a"></div>
							<div class="wh100 flec center">
							<Pagination @pageIndex="pageIndex" :total="total_page" :page="current_page"></Pagination>
							</div>
						</div>
					</div>
				</div>

				<div class="pa wh100 b0 t0 bg03 flec center pd05 pdtb5 _pd45 bbx trs1" :class="[showPanel?'l0p':'l100']">

				<!--点击设置 弹框-->

					<div class="wh100 bgf _maw600 _mah400 bd1c left ofh bbx flex flc">
						<div class="conf-item flec w100 bb1d pd05 bbx _item-shadow" name="header" >
							<div class="h35 flec pd05 bbx sp1 fsw"><span class="flex1">数据配置</span></div>
							<div class="flex1"></div>
							<div class="btn cb2 fs12 h25 pd05 hovbg01 br2" @click="saveConfig()">
								<i class="fa fa-save marr5"></i><span>保存</span>
							</div>
							<div class="btn cb2 fs12 h25 pd05 hovbg01 br2" @click="showPanel = false">
								<i class="fa fa-close"></i>
							</div>
						</div>
						<div class="flex1 w100 ofh pdtb5 bbx">
							<div class="wh100 ovy bbx">
								<div class="w100 _bb1c"></div>
								<div class="conf-item disi w280 mar5 bd1d pd05 pdtb5" name="data-api">
									<div class="h30 flec pd05 bbx sp1"><span class="flex1">数据来源</span></div>
									<el-cascader class="h30 w260 ipdl5 ihbdci ibd1i ibr2" @change="updateS"
									v-model="myDataSource" :options="dataSource" ></el-cascader>
									<select  class="h30 w260 bd1i hbdci trs2 pd05 bbx" v-model="myDataSource[0]" @change="updateS">
										<option value="" ></option>
										<option v-for="(a,b) in dataSource" :value="a.v" v-text="a.k"></option>
									</select>
								</div>
								<div v-if="myDataSource[0]==0" class="conf-item disi w100 bbx bd1d pd05 pdtb5" name="data-ctx">
									<div class="h30 flec pd05 bbx sp1"><span class="flex1">数据内容</span></div>
									<div>
										<Input name="ctxText" v-model="ctxText" iclass="pdtb5" type="textarea">
									</div>
								</div>
								<div v-if="configParams.length" class="w100 bb1c">
									<div v-for="(v,k) in configParams" class="conf-item disi w280 mar5 bd1d pd05 pdtb5" name="params">
										<div class="h30 flec pd05 bbx sp1">
											<span class="w50">参数</span>
											<span class="flex1" v-text="v.k" :title="v.k">参数</span>
										</div>
										<div class="w260 bbx h25">
											<select v-if="v.t == 'select'" class="wh100 bd1i hbdci trs2 pd05 bbx" v-model="v.v" >
												<option value="" ></option>
												<option v-for="(a,b) in v.l" :value="a.v" v-text="a.k"></option>
											</select>
											<input v-if="v.t == 'number'" class="wh100 bd1i hbdci trs2 pd05 bbx" v-model="v.v" 
											type="number"/>
										</div>
									</div>
								</div>
								<div v-if="myDataSource[0]" class="w100 bb1c">
									<div class="conf-item disi w280 mar5 bd1d pd05 pdtb5" name="data-api">
										<div class="h30 flec pd05 bbx sp1"><span class="flex1">展示形式</span></div>
										<div class="w260 bbx h25">
											<select class="wh100 bd1i hbdci trs2 pd05" v-model="displayType">
											<option value="" ></option>
											<option v-for="(a,b) in displayTypes" :value="a.v" v-text="a.k"></option>
											</select>
										</div>
									</div>
								</div>
								<div class="conf-item disi w280 mar5 bd1d pd05 pdtb5" name="data-api" v-if="displayType==2">
									<div class="h30 flec pd05 bbx sp1"><span class="flex1">X-横轴数据项目</span></div>
									<div class="w260 bbx h25">
										<select class="wh100 bd1i hbdci trs2 pd05" _disabled v-model="chartType">
											<option value="1" >以后数据属性列为X轴</option>
											<option value="2" >以后数据记录行为X轴</option>
										</select>
									</div>
								</div>
								<div class="conf-item disi w100 bd1d pd05 pdtb5" name="data-display" v-if="display.length">
									<div class="w101 h30 flec sp1 pd05 bbx c000"><span class="flex1">数据列</span></div>
									<div class="flex1 c666">
										<table class="w100 bbx bd1e" cellspacing="0" cellpadding="0" >
											<tr class="h30 bgf1 alc c333 center">
												<th>列排序</th>
												<th>数据</th>
												<th>数据说明</th>
												<th>表头</th>
												<th>是否展示</th>
												<th >数据排序</th>
											</tr>
											<tr v-for="(v,k) in display" class="h30 bb1e center">
											<td >
												<input class="w60 h25 bd1i hbdci bbx pd05 center" type="number" min=0 v-model="v.s" />
											</td>
											<td v-text="v.k">数据</td>
											<td v-text="v.title">数据说明</td>
											<td >
												<input class="w101 h25 bd1i hbdci bbx pd05 center" type="text" v-model="v.thead" />
											</td>
											<td vv-text="v.show" @click="v.show = !v.show">
												<div class="btn center h25 cb2 "  >
												<i class="fa w20" :class="[v.show?'fa-eye':'fa-eye-slash']"></i>
												<span class="fs12 w40"><span v-if="!v.show">不</span>可见</span>
												</div>
											</td>
											<td  @click="switchEnSort(v)">
												<div class="flex alc center">
												<div class="btn wh18 fs12" :class="[v.es ? 'bd1c':'bd1d bgf1']">
													<i class="fa fa-check w20" v-if="v.sort"></i></div>
												</div>
											</td>
											</tr>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
		</div>
		`,
		props: { 
			value: { type: Object,  default: {}},
			class: { type: String,  default: ''},
			show:  { type: Boolean, default: true},
			box:   { type: String,  default: 'div[name=content]'},
			header:{ type: Boolean, default: false},
			bgcolor:{type: String,  default: ''},//ftcolor
			ftcolor:{type: String,  default: ''},
			control:{ type: Boolean, default: true},
			trans:{ type: Boolean, default: true},
			title: { type: String,  default: ''},
			panelIndex: { type: Number,  default: 1},
		},
        data () {
        	return {
        		showPanel: false,
        		dataSource: __api_info,
        		displayTypes: [{k:'列表',v:1,},{k:'折线图表',v:2,},],
        		sourceInfo: {},
        		configParams:[],
        		display:[],
        		
        		myDataSource:[0],
        		paramsList:[],
        		displayCols:[],
        		displayStatus: true,
        		displayType: -1,
        		chartType: 1,
        		ctxText: '',
        		
        		showIndex: false,
        		dataList: [],
        		thead: [],
        		filter:[],
        		current_page: '',
        		pageNumber:'1',
        		total_page:'',
        		sort:'',
        		order:'',
        		cid:'',
        		chart: '',
        	};
        },
        watch: {
        	'value': function (val) {
        		let v = this;
        		//console.log('watch value',val);
        		v.setDataInfo(val);
        		if (v.showPanel) v.showPanel = false;
        	},
        	'displayType': function (val) {
        		let v = this;
        		if (val == 1 && v.chart) {
        			//v.clear();
        		}
        		if (val == 2) {
        			setTimeout(function () { v.updateChart() },1000)
        		}
        	}
        },
        computed: {
        	widgetClass () { return [this.class];},
        	panelClass () { return ['pf'];},
        	bgStyle () { 
        		let bg = {};
        		if (this.bgcolor) {
        			bg.background = this.bgcolor;
        			bg.backgroundSize = '100%';
        			bg.backgroundPosition = 'center center';
        		}
        		if (this.ftcolor) bg.color = this.ftcolor;
        		return bg;
        	},
        	showHeader (){ 
        		let tf = this.header ? true: false;
        		if (this.header == 0) tf = false;
        		return tf; 
        	},
        },
        created: function() {
        	let v = this;
        	let cid = 'chart-box-' + Date.now() + parseInt(Math.random()*100);
        	v.cid = cid;
        	//v.setDataInfo(v.value);
        },
        mounted () {
        	let v = this;
        	__on(window, 'resize', this.updateSize);
        	this.setDataInfo(this.value);
        	v.$emit('setzindexup',2)
        },
        methods: {
        	clear () {
        		let v = this;
        		if (v.chart) {
        			if (v.chart.destory) {
        				v.chart.destory();
        				v.chart = null;
        			}
        		}
        	},
        	doQuery(){
        		let v = this;
        		v.setFliter(1);
        		v.getDataList();
        		
        	},
        	setDataInfo (i) {
        		let v = this;
        		//v.displayStatus = false;
        		//console.log('setDataInfo-',i.displayType,i);
        		if (i.displayCols) v.displayCols = i.displayCols;
        		if (i.paramsList ) {
        			v.paramsList  = i.paramsList;
        		}
        		if (i.myDataSource) {
        			v.myDataSource = i.myDataSource;
        			v.updateS(i.myDataSource);
        			//console.log('sourceInfo',v.sourceInfo);
        			if (v.sourceInfo.filter) {
        				let fi = {filter:__copy(v.sourceInfo.filter)};
        				v.filter = [fi];
        			}
        		}
        		//if (i.displayStatus)v.displayStatus = i.displayStatus;
        		if (i.displayType)  v.displayType = i.displayType;
        		if (i.chartType) v.chartType = parseInt(i.chartType) || 1;
        		v.ctxText = i.content || '';
        		let thead = [];
				let cols = v.display || [];
				for (let x = 0; x < cols.length; x++) {
					let kv = cols[x];
					let th = {sort:kv.sort ? 1 : 0,class:'',key:kv.k, name:kv.thead, type: 'text', s:kv.s};
					if (kv.st == 'select') {
						th.type = 'select';
						th.options = kv.l;
					}
					if (kv.show && kv.k) thead.push(th);
					if (kv.k === '') v.showIndex = kv.show;
				}
				//console.log('paramsList',v.paramsList)
				thead.sort(function(a, b) {return a.s - b.s;})
				v.thead = thead;
				if (i.myDataSource) {
					if (i.myDataSource[0] == '--') {
						return;
					}
        			v.getDataList();
        		}
        	},
        	saveConfig () {
        		let v = this;
        		let myData = {
        			myDataSource: v.myDataSource,
        			paramsList:   v.configParams,
        			displayCols : v.display,
        			displayStatus: v.displayStatus,
        			displayType: v.displayType,
        			chartType: v.chartType,
        			content: v.ctxText,
        			//content: v.ctxText,
        		}
        		v.$emit('input',myData);
        		v.$emit('update',myData);
        	},
        	showConfig () {
        		let v = this;
        		if (v.showPanel) {
        			v.showPanel = false;
        			return;
        		}
        		v.showPanel = true;
        	},
        	openSetting(){ this.showConfig(); },
        	setMax(ai){
        		let v = this;
        		if (ai == 1) {
        			v.$emit('setmax')
        		} else {
        			v.$emit('setmin')
        		}
        	},
        	setFliter () {
        		let v = this;
        		v.$emit('setzindexdown',0)
        	},
        	openFilter () {
        		let v = this;
        		//console.log(this.$refs)
        		if (v.$refs.filter && v.$refs.filter.showFilter) {
        			v.$refs.filter.showFilter();
        		}
        		v.$emit('setzindexup',2)
        	},
        	getSource(r){
				let v = this;
				let l = v.dataSource;
				//console.log('getSource',l)
				for (let i = 0; i < l.length; i++) {
        			if (l[i].value == r[0]) {
        				for (let x = 0,ll = l[i].children || []; x < ll.length; x++) {
        					if (ll[x].value == r[1]) {
        						v.sourceInfo = ll[x];return;
        					}
        				}
        			}
        		}
				v.sourceInfo = {};
			},
        	setParams () {
				let v = this;
				let data = [];
        		let conf = v.sourceInfo.params || [];
        		let old  = v.paramsList || [];
        		for (let k = 0; k < conf.length; k++) {
        			let item = {},s = conf[k];
        			for (let key in s) item[key] = s[key];
        			item.v = item.d || '';
        			for (let x = 0; x < old.length; x++) {if (old[x].key == item.key) {item.v = old[x].v;}}
        			data.push(item)
        		}
        		v.configParams = data;
			},
			switchEnSort (i){
				//i.es = i.es ? 0 : 1 ;
				i.sort = i.es? (i.sort ? 0 : 1) : 0;
			},
			setDisplay () {
				let v = this;
				let display = [{s: 0,k: '',st: 'number',title:'列表行号', thead:'序号',show: true}];
        		let dl = v.sourceInfo.data || [];
        		let cl = [];
        		for (let i = 0; i < dl.length; i++) {
        			let o = {s: 0,k: '__index',st: 'number',title:'数据意义说明', thead:'',show:true,sort:0,es:0,is:0}; /**s 列排序  */
        			for (let k in dl[i]) o[k] = dl[i][k];
        			if (v.displayCols.length) {
        				for (let x = 0; x < v.displayCols.length;x++) {
        					if (v.displayCols[x].k == o.k) {
        						let old = v.displayCols[x], fork = {s:'',thead:'',show:'',sort:'',is:''}
        						for (let ok in fork) o[ok] = old[ok];
        					}
        				}
        			}
        			if (o.thead == '') o.thead = o.title || o.k;
        			cl.push(o);
        		}
        		v.display = cl;
        		//console.log('v.displa',v.display);
			},
        	updateS (r) {
        		let v = this;
        		v.getSource(r);
        		v.setParams();
        		v.setDisplay();
        	},
        	pageIndex (e) {
        		let v = this;
        		//console.log('pageIndex',e);
        		v.pageNumber = e;
        		v.getDataList();
        	},
        	sortChange(i,k){
        		let v = this;
				for (let i = 0; i < v.thead.length; i++) v.thead[i].sort = v.thead[i].sort > 0 ? 1 : 0;
				if (i.sort) i.sort = k;
				v.getDataList();
        		//console.log('sortChange',i,k);
        	},
        	getDataList () {
        		let v = this;
				let uri = v.myDataSource[0] + v.myDataSource[1];
				let data = __getSort(v.thead);
				data.token = __gls('token');
				let pl = v.paramsList || [];
				//console.log('pl',uri,pl)
				for (let i = 0; i < pl.length; i++) {
					data[pl[i].key] = pl[i].v;
				}
				if (v.pageNumber) data.page = v.pageNumber;
				__appendFilter(data,v.filter);
				//console.log('getDataList v.filter',v.filter,data)
				if (v.filter) {
					let fl = v.filter || [];
					for (let fi = 0; fi < fl.length; fi++) {
						if (fl[fi].v || fl[fi].v === 0) {
							//data[fl[fi].key] = fl[fi].v;
						}
					}
				}
				//console.log('getDataList',data)
				ajax({url:uri,data: data}).then((r) => {
					v.currentData = [];
					v.dataList = [];
					if (r.code === 200) {
						v.currentData = r.data;
						let list = __fmData(r.data,v.thead);
						//console.log('getDataList',v.title,v.displayType,r)
						v.dataList = list;
						if (r.total_page) {
							v.total_page = parseInt(r.total_page) || 1;
							v.current_page = parseInt(r.current_page) || 1;
						}
						if (v.displayType == 2) {
							setTimeout(function () { v.updateChart() },300);
							
						}
						v.displayStatus = true;
					}
				}).catch((e) => {
					v.currentData = [];
					v.dataList = [];
					console.log('error', e)
				});
        	},
        	updateChart () {
        		let v = this;
        		let eid = v.cid;
				let dom = document.getElementById(eid);
				if (!dom) {
					console.log('绘制图表出错..',5000,'co')
					return;
				}
				let xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
				let seriesData = [];
				let cl = v.displayCols || [];
				let dl = v.currentData || [];
				let legendData = [];
				if (v.chartType == 1) {
					xAxisData = []
					for (let i = 0; i < cl.length; i++) {
						let ci = cl[i];
						if (ci.st=='number' && ci.show) {
							let xval = ci.thead || ci.title;
							xAxisData.push(xval);
						}
					}
					for (let y = 0; y < dl.length; y++) {
						let seriesItem = {
							name: dl[y].name || '数据-' + (y+1),
							type: 'line',
							data: [],
						};
						for (let x = 0; x < cl.length; x++) {
							let ci = cl[x];
							if (ci.is === 1 || ci.is === '1') { seriesItem.name = dl[y][ci.k]; }
							if (ci.show) {
								let ival = dl[y][ci.k];
								ival = parseFloat(ival) || 0;
								seriesItem.data.push(ival)
							}
						}
						legendData.push(seriesItem.name);
						seriesData.push(seriesItem)
					}
				}
				if (v.chartType == 2) {
					xAxisData = []
					for (let i = 0; i < dl.length; i++) {
						let di = dl[i];
						//console.log('di',di)
						if (1) {
							let xval = di.name || i;
							xAxisData.push(xval);
						}
					}
					for (let x = 1; x < cl.length; x++) {
						let ci = cl[x];
						//console.log('ci',ci)
						if (ci.show) {
							let seriesItem = {
								name: ci.thead || ci.title || '数据-' + (x),
								type: 'line',
								data: [],
							};
							for (let y = 0; y < dl.length; y++) {
								let dy = dl[y];
								let ival = dy[ci.k];
								ival = parseFloat(ival) || 0;
								seriesItem.data.push(ival)
							}
							legendData.push(seriesItem.name);
							seriesData.push(seriesItem)
						}
						
					}
				}
				let option = {
				    //title: { text: v.title,textStyle:{fontStyle:'14px',fontWeight:'normal'}},
				    tooltip: { trigger: 'axis'},
				    toolbox: { 
				    	feature: {
						    magicType: {type: ['line', 'bar', 'stack', 'tiled']},
						    saveAsImage: {},
				    	},
				    },
				    legend: { data: legendData, top: '30px' },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: xAxisData,
				    },
				    yAxis: { type: 'value' },
				    series: seriesData,
				};
				if (v.chart && v.chart.clear) {
					v.chart.clear();
				}
				if (!v.chart) {
					v.chart = echarts.init(dom);
				}
				//console.log('v.chart setOption',option)
				v.chart.setOption(option);
				v.chart.resize();
        	},
        	resize () {
        		let v = this;
        		if (v.chart && v.chart.resize) {
					v.chart.resize();
				}
        	},
        	updateSize () {
        		this.resize();
        	},
        },
        beforeDestroy () {
            __off(window, 'resize', this.updateSize);
            this.clear()
        },
	},
]
